
.home{
    display: flex;
    flex-direction: column;
    .main{
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
        .swiper{
            width: 100%;
            height: 200px;
            position: relative;
            .swiper-wrapper{
                .bg1{
                    background: url(../../assets/imgs/1.webp) no-repeat center / cover;
                }  
                .bg2{
                    background: url(../../assets/imgs/2.webp) no-repeat center / cover;
                } 
                .bg3{
                    background: url(../../assets/imgs/3.webp) no-repeat center / cover;
                } 
            }
            .swiper-pagination{
                   position: absolute;
                   top:170px;
            }
           
        }

        .content-box{
            width: 90%;
            height: 150px;
            margin: 20px auto;
            display: flex;
            .ranking{
                flex: 2;
                background: url(../../assets/imgs/index-card-rank.png) no-repeat left bottom;
                background-position-y: 40px;
                background-size: 100px;
                background-color: rgba(21, 146, 204, 1);
                margin-right: 20px;
                border-radius: 15px;
                position: relative;
                
                h3{
                    margin-left: 14px;
                    margin-top: 14px;
                    color: rgba(0, 78, 115, 1);
                    font-size: 20px;
                }

                #rankbox{
                    color: rgba(255, 255, 255, 1);
                    font-size: 40px;
                    position: absolute;
                    right: 10px;
                    bottom: 20px;
                }
            }
            .clock{
                flex: 3;
                border-radius: 15px;
                background: url(../../assets/imgs/index-card-sum.png) no-repeat left bottom;
                background-position-x: 10px;
                background-position-y: 30px;
                background-color: rgba(123, 203, 245, 1);
                background-size: 110px;
                position: relative;

                h3{
                    margin-left: 14px;
                    margin-top: 14px;
                    color: rgba(0, 81, 119, 1);
                    font-size: 20px
                }
                #clockBtn{
                min-width: 100px;
                height: 40px;
                line-height: 23px;
                border-radius: 20px;
                background-color: rgba(170, 217, 247, 1);
                color: rgba(0, 78, 115, 1);
                font-size: 16px;
                text-align: center;
                border: 3px solid rgba(0, 81, 119, 1);
                position: absolute;
                right: 10px;
                bottom: 20px;
                }
                
            }
            
        }
        .content-box1{
            width: 90%;
            height: 110px;
            margin: 20px auto;
            display: flex;
            .sportData{
                flex: 1;
                background-color: #ccc;
                border-radius: 15px;
                margin-right: 20px;
                background: url(../../assets/imgs/index-card-data.png) no-repeat center / cover;

                h3{
                    margin-left: 14px;
                    margin-top: 12px;
                    color: rgba(255, 255, 255, 1);
                    font-size: 16px;
                }
            }
            .badgesBox{
                flex: 1;
                border-radius: 15px;
                background: url(../../assets/imgs/index-card-badge.png) no-repeat left bottom;
                background-color: hotpink;
                background-position-y: 20px;
                background-size: 100px;
                position: relative;

                h3{
                    margin-left: 14px;
                    margin-top: 12px;
                    color: rgba(0, 81, 119, 1);
                    font-size: 16px;
                }

                #badgesNum{
                    color: rgba(0, 78, 115, 1);
                    font-size: 60px;
                    position: absolute;
                    right: 20px;
                    bottom: 20px;
                    em{
                        font-style: normal;
                        font-size: 12px;
                    }
                }
            }
        }
        .course{
            background-color: #ccc;
            border-radius: 15px;
            padding-left: 14px;
            padding-top: 14px;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            background: url(../../assets/imgs/course-img04.jpg) no-repeat center / cover;
        }
        .runBox{
            background-color: #ccc;
            border-radius: 15px;
            padding-left: 14px;
            padding-top: 14px;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            background: url(../../assets/imgs/index-card-run.png) no-repeat center / cover;  
        }
    }
}
